<template>
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
    <n-message-provider>
      <n-dialog-provider>
        <n-layout class="h-screen min-w-[1200px]">
          <n-layout-header style="height: 64px;" bordered>
            <div class="flex justify-between items-center h-full px-6">
              <div class="flex items-center">
                <span class="text-xl font-bold">党员信息管理系统</span>
              </div>
            </div>
          </n-layout-header>
          
          <n-layout has-sider style="height: calc(100vh - 64px);">
            <n-layout-sider 
              bordered 
              collapse-mode="width" 
              :collapsed-width="64" 
              :width="240" 
              show-trigger
              :collapsed="collapsed"
              @collapse="collapsed = true"
              @expand="collapsed = false"
            >
              <n-menu 
                v-model:value="activeKey" 
                :options="menuOptions" 
                :collapsed="collapsed"
                :collapsed-width="64"
                :collapsed-icon-size="22" 
              />
            </n-layout-sider>
            
            <n-layout-content content-style="padding: 0; height: 100%;">
              <router-view />
            </n-layout-content>
          </n-layout>
        </n-layout>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup>
import { h, ref, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import {
  NConfigProvider, NMessageProvider, NDialogProvider, NLayout,
  NLayoutHeader, NLayoutSider, NLayoutContent, NMenu, NAvatar, NIcon
} from 'naive-ui'
import { zhCN, dateZhCN } from 'naive-ui'

// 引入图标
import {
  HomeOutline as HomeIcon,
  PeopleOutline as PeopleIcon,
  GitBranchOutline as BranchIcon
} from '@vicons/ionicons5'

// 侧边栏折叠状态，默认为折叠
const collapsed = ref(true)

// 渲染图标的辅助函数
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 菜单项配置
const menuOptions = [
  {
    label: () => h(RouterLink, { to: { name: 'home' } }, { default: () => '首页' }),
    key: 'home',
    icon: renderIcon(HomeIcon)
  },
  {
    label: () => h(RouterLink, { to: { name: 'member-list' } }, { default: () => '党员信息管理' }),
    key: 'member-list',
    icon: renderIcon(PeopleIcon)
  },
  {
    label: () => h(RouterLink, { to: { name: 'branch-list' } }, { default: () => '党支部管理' }),
    key: 'branch-list',
    icon: renderIcon(BranchIcon)
  }
]

// 菜单激活项
const activeKey = ref(null)
const route = useRoute()

// 监听路由变化，自动更新菜单的激活项
watch(
  () => route.name,
  (newRouteName) => {
    activeKey.value = newRouteName
  },
  { immediate: true } // 立即执行一次，保证刷新页面时菜单也能正确高亮
)
</script>